<template>
    <view class="first-box">
        <uni-popup ref="popup" type="bottom">
            <view class="box">
                <text class="title">请选择</text>
                <scroll-view class="popup-scroll" :scroll-into-view="viewId" scroll-y="true">
                    <text
                        :id="getId(index)"
                        :style="[index === choiceIndex ? styleObject : '']"
                        class="option"
                        v-for="(item, index) in choiceList"
                        :key="index"
                        @click="choiceSelect(index)"
                        >{{ item }}
                    </text>
                </scroll-view>
            </view>
            <view class="cancel-box">
                <text class="cancel" @click="$refs.popup.close()">取消</text>
            </view>
        </uni-popup>
        <view class="choice-menu" @click="showChoice()">
            <input class="choice-input" :placeholder="choiceHint" disabled="true" v-model="choice" />
            <uni-icons type="arrowright" size="40" v-show="right"></uni-icons>
            <uni-icons type="arrowdown" size="40" v-show="bottom"></uni-icons>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            choiceIndex: -1,
            viewId: "",
            right: true,
            bottom: false,
            styleObject: {
                backgroundColor: "#FCFAFA",
                color: "$color-black",
            },
            choice: "",
        }
    },
    props: {
        choiceHint: {
            type: String,
            default: "",
        },
        choiceList: {
            type: Array,
            default: function () {
                return []
            },
        },
        click: {
            type: Number,
            default: 0,
        },
        express: {},

        value: {},
    },
    components: {},
    methods: {
        upData(num) {
            if (num == 1) {
                if (this.choiceIndex > -1) {
                    return this.choiceIndex
                } else {
                    return
                }
            }
            return this.choice
        },
        preload(info, num) {
            if (num > -1) {
                this.choice = this.express[num].Name
                this.choiceIndex = num

                return
            }
            this.choice = info
        },
        getId(index) {
            return "option" + index
        },
        showChoice() {
            if (this.click == 1) {
            } else {
                this.$refs.popup.open()
            }
        },
        choiceSelect(index) {
            this.right = false
            this.bottom = true
            this.viewId = "option" + index
            this.choiceIndex = index
            this.$refs.popup.close()
            this.choice = this.choiceList[this.choiceIndex]
            this.$emit("numIndex", index)
            this.$emit("chargingIndex", index)
        },
    },
    created() {},
    mounted() {},
}
</script>

<style lang="scss">
.first-box {
    flex: 1;
}

%item-template {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 30rpx 0;
    font-size: 30rpx;
    border-bottom: 1px solid $app-color-input-bg;
}

.cancel-box {
    background-color: $color-gray-5;
    padding-top: 12rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .cancel {
        @extend %item-template;
        background-color: $color-white;
    }
}

.box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: $color-white;
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;

    .title {
        @extend %item-template;
        font-weight: 700;
    }

    .popup-scroll {
        max-height: 400rpx;
    }

    .option {
        @extend %item-template;
        color: $color-gray-2;
        font-weight: 500;
    }

    .option:last-child {
        border: none;
    }
}

.choice-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 16rpx;
    margin-left: 20rpx;

    margin-right: 30rpx;
    flex: 1;
    background-color: #f5f5f5;
}

%right-style {
    font-size: 30rpx;
    margin: 16rpx 0 16rpx 20rpx;
    display: flex;
}

.choice-input {
    @extend %right-style;
}
</style>
